import { Button, Form, Input, Select, Message } from 'antd';
import React, { useEffect } from 'react';
import './index.css';
const { Option } = Select;
import http from '@/utils/request/index';
const layout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 18 },
};
const tailLayout = {
  labelCol: { span: 5 },
  wrapperCol: { offset: 10, span: 5 },
};

const View: React.FC = () => {
  const [form] = Form.useForm();
  useEffect(() => {
    //给input输入框添加默认内容
    form.setFieldsValue({
      catename: '',
    });
  }, []);
  const onFinish = (values: any) => {
    console.log(values);
    http({
      url: '/cateory',
      method: 'post',
      data: { catename: values.catename },
    }).then((res) => {
      if (res.code == 0) {
        Message.success('提交成功', 2);
        form.setFieldsValue({
          catename: '',
        });
      }
    });
  };
  const onReset = () => {
    form.resetFields();
  };
  return (
    <div style={{ paddingTop: '30px' }}>
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item
          name="catename"
          label="分类名称"
          rules={[{ required: true }]}
        >
          <Input size="large" />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit" size="large">
            提交
          </Button>
          <Button
            htmlType="button"
            onClick={onReset}
            size="large"
            style={{ marginLeft: '20px' }}
          >
            重置
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default View;
